<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/react.development.js"></script>
  <script src="./js/react-dom.development.js"></script>
  <script src="./js/babel.min.js"></script>
</head>

<body>
  <div id="app"></div>
  <script type="text/babel">
    // jsx 里的事件， 合成事件
    // react 里的事件 绑定和原生的区别

    /*
    1. 事件名称： 需要改成： 小驼峰 ： onclick  -- > onClick
    2. 时间的执行函数，不需要小括号
    3. 事件对象是合成事件对象  ，他会把原生的事件对象 放在 native Event 字段里，  target 是事件源
    4.react 里的事件对象，指向undefined
    5.取消默认事件  e.preEventDefault
    6.事件的传参  ：  6.1 ： 函数的嵌套；  6.2 ： bind 传参
    7. onChange 事件的区别
     原生： 失去焦点  改变内容  触发onchange 事件
     react 里 这个事件 类似于 oninput
    */
    function fn(e) {
      // console.log("111", e);
    }
    function change() {
      console.log("111");
    }
    function showkey(key) {
      console.log(key);
    }
    let vdom = <div>
      <button onClick={fn}>点击</button>
      <a href="http://www.itcast.com" onClick={change}>点我跳转传智播客</a>
      <ul>
        <li onClick={() => { showkey(1) }}>111</li>
        <li onClick={() => { showkey(2) }}>222</li>
        <li onClick={() => { showkey(3) }}>333</li>

      </ul>
    </div>

    console.log(vdom);
    let root = ReactDOM.createRoot(document.querySelector("#app"))
    root.render(vdom)

  </script>
</body>

</html>